import React, { useEffect } from 'react';
import { Form, Row, Col, Card, Input, Select, DatePicker, Button } from 'antd';

const { Item } = Form;

const AntdForm = () => {
    // Form 4.0 有两种常用的提交方式
    // 方式一：
    const onFinish = (values) => {
        console.log('values', values);
    }

    // 方式二
    const [form] = Form.useForm();
    // console.log('form',form);

    useEffect(() => {
        form.setFieldsValue({ usename: '王五' });
    }, []);

    // 提交
    const handleSubmit = () => {
        form.validateFields(['usename']).then((allValues) => {
            console.log('allValues:', allValues);
        })
    }

    // 重置
    const handleReset = () => {
        form.resetFields();
    }

    return (
        <Card>
            <Form
                form={form}
            // onFinish={onFinish}
            // initialValues={{ usename: '马云' }}
            >
                <Row gutter={24} justify='space-between'>
                    <Col span={8}>
                        <Item label='员工姓名' name='usename'>
                            <Input />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item label='员工性别' name='sex'>
                            <Select>
                                <Select.Option key='男' value='男'>男</Select.Option>
                                <Select.Option key='女' value='女'>女</Select.Option>
                            </Select>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item label='入职时间' name='time'>
                            <DatePicker style={{ width: '100%' }} />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item>
                            {/* <Button type='primary' htmlType='submit'>提交</Button> */}
                            <Button type='primary' onClick={handleSubmit}>提交</Button>
                            <Button type='primary' onClick={handleReset}>重置</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    )
}

export default AntdForm;